import React, { useState, useEffect } from "react";
import TableWarpper from "@/components/TableWarpper";
import {
  Space,
  Form,
  Input,
  Button,
  Select,
  Row,
  Col,
  Flex,
  Modal,
} from "antd";
import {
  SearchOutlined,
  SyncOutlined,
  ExclamationCircleFilled,
} from "@ant-design/icons";
import AddRole from "./components/addRole";
import { debounce } from "@/utils";
import { hasPermi } from "@/utils/permission.ts";
const { confirm } = Modal;

export const Role = () => {
  const [data, setData] = useState([]);
  const [defaultCurrent, setDefaultCurrent] = useState(1);
  const [total, setTotal] = useState(0);
  const [form] = Form.useForm();
  const { Option } = Select;

  const [optionsList, setOptionsList] = useState([]);

  const [addIsModal, setAddIsModal] = useState({
    isModalStatus: false,
    isModalTitle: "",
  });
  const [roleInfo, setRoleInfo] = useState({});

  useEffect(() => {
    let data1 = [];
    for (let i = 0; i < 30; i++) {
      data1.push({
        key: i,
        name: `Edward King${i}`,
        companyName: `companyName${i}`,
        expandTree: ["3", "3-1", "4", "4-1", "4-2"],
      });
    }
    setData(data1);
    setTotal(data1.length);

    let data2 = [];
    for (let i = 0; i < 9; i++) {
      data2.push({
        label: `companyName${i}`,
        value: `value${i}`,
      });
    }
    setOptionsList(data2);
  }, []);

  const columns = [
    {
      title: "序号",
      dataIndex: "",
      key: "index",
      width: 80,
      //   render: (_, record, index) => {
      //     return (
      //         <span>{index + 1}</span>
      //     )
      //   },
      render: (_, record, index) => index + 1,
    },
    {
      title: "角色名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "部门名称",
      dataIndex: "companyName",
      key: "companyName",
    },
    {
      title: "操作",
      key: "action",
      width: 150,
      render: (_, record) => {
        return (
          <Space>
            {hasPermi("system:role:edit") && (
              <a onClick={(e) => rowEdit(record)}>编辑</a>
            )}
            {hasPermi("system:role:del") && (
              <a onClick={(e) => rowDel(record)}>删除</a>
            )}
          </Space>
        );
      },
    },
  ];

  // 表格配置
  const tableSetting = {
    columns: columns,
    data: data,
    bordered: false,
  };
  // 分页配置
  const paginationSetting = {
    showSizeChanger: true,
    showQuickJumper: true,
    defaultCurrent: defaultCurrent,
    total: total,
    positionPage: ["bottomCenter"],
  };

  const onChangePage = () => {};
  const rowEdit = (record) => {
    // console.log(record);
    setRoleInfo(record);
    setAddIsModal({
      isModalStatus: true,
      isModalTitle: "修改角色",
    });
  };
  const rowDel = debounce(
    (record) => {
      console.log(record);
      confirm({
        title: "Are you sure delete this task?",
        icon: <ExclamationCircleFilled />,
        content: "Some descriptions",
        okText: "确认",
        cancelText: "再想想",
        onOk() {
          console.log("OK");
        },
        onCancel() {
          console.log("Cancel");
        },
      });
    },
    500,
    true
  );

  // 查询
  const onFinish = (values: any) => {
    console.log(values);
  };

  // 重置
  const onReset = () => {
    form.resetFields();
  };

  const handleRole = () => {
    setRoleInfo({});
    setAddIsModal({
      isModalStatus: true,
      isModalTitle: "新增角色",
    });
  };

  const onModalCancel = (data) => {
    setAddIsModal(data);
  };

  const onModalFinish = (values, checkedTree) => {
    console.log(values, checkedTree);
    setAddIsModal({
      isModalStatus: false,
      isModalTitle: "",
    });
  };

  // 设置下拉框高度滚动
  //   const customRender = (menu) => (
  //     <div style={{ overflow: "auto", maxHeight: 200 }}>{menu}</div>
  //   );
  //   <Select
  //     dropdownRender={customRender}
  //   >
  //   </Select>

  return (
    <div className="Role pageWarpper">
      <Form form={form} name="control-hooks" onFinish={onFinish}>
        <Row gutter={20}>
          <Col span={6}>
            <Form.Item name="name" label="角色名称">
              <Input placeholder="请输入 角色名称" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="companyName" label="部门名称">
              <Select
                placeholder="请选择 部门名称"
                allowClear
                listItemHeight={50}
                listHeight={150}
              >
                {optionsList.map((item, index) => (
                  <Option value={item.value} key={index}>
                    {item.label}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                <SearchOutlined />
                查询
              </Button>
              <Button
                htmlType="button"
                onClick={onReset}
                style={{ marginLeft: 10 }}
              >
                <SyncOutlined />
                重置
              </Button>
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <Flex gap="small" wrap="wrap" style={{ marginBottom: "12px" }}>
        {hasPermi("system:role:add") && (
          <Button type="primary" onClick={(e) => handleRole()}>
            新增
          </Button>
        )}
      </Flex>
      <TableWarpper
        onChangePage={onChangePage}
        tableSetting={tableSetting}
        paginationSetting={paginationSetting}
      />
      {addIsModal.isModalStatus && (
        <AddRole
          isModal={addIsModal}
          onModalCancel={onModalCancel}
          onModalFinish={onModalFinish}
          roleInfo={roleInfo}
        />
      )}
    </div>
  );
};

export default Role;
